<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org" lang="zh">
<head th:replace="commons :: head('制定学习计划')">
    <title>Messages : Create</title>
</head>
<body>
<div th:insert="student/student::nav(0)">
</div>

<div class="container">

    <div class="row">
        <button class="btn btn-primary" data-toggle="modal" onclick="addStudy()">新建学习计划</button>
        <div class="modal fade" id="modal">
            <div class="modal-dialog">
                <div class="modal-content" style="width: 700px;">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span>&times;</span></button>
                        <h4 class="modal-title">添加学院</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label for="college_name_input" class="col-sm-2 control-label">学院名称：</label>
                                <div class="col-sm-10">
                                    <input type="text" name="collegeName" class="form-control" id="college_name_input"
                                           placeholder="学院名称">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="college_manager_input" class="col-sm-2 control-label">管理者：</label>
                                <div class="col-sm-10">
                                    <input type="text" name="manager" class="form-control" id="college_manager_input"
                                           placeholder="管理者">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="college_address_input" class="col-sm-2 control-label">学院地址：</label>
                                <div class="col-sm-10">
                                    <input type="text" name="address" class="form-control" id="college_address_input"
                                           placeholder="学院地址">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="college_degreeName_input" class="col-sm-2 control-label">学位名称：</label>
                                <div class="col-sm-10">
                                    <input type="text" name="degreeName" class="form-control"
                                           id="college_degreeName_input" placeholder="学位名称">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="college_score_input" class="col-sm-2 control-label">学位总学分：</label>
                                <div class="col-sm-10">
                                    <input type="number" name="score" class="form-control" id="college_score_input"
                                           placeholder="学位总学分">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="college_studyTime_input" class="col-sm-2 control-label">学位总学时：</label>
                                <div class="col-sm-10">
                                    <input type="number" name="studyTime" class="form-control"
                                           id="college_studyTime_input" placeholder="学位总学时">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button id="save_click" type="button" class="btn btn-primary">保存</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <table id="table" class="table table-responsive table-hover">
            <thead>
            <tr>
                <td>学习计划编号</td>
                <td>学年度</td>
                <td>已选课程数</td>
                <td>总费用</td>
                <td>状态</td>
                <td>提交学习计划</td>
                <td>修改学习计划</td>
                <td>删除学习计划</td>
            </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
    <div class="row">
        <div class="col-md-6" id="page_info">
        </div>
        <div class="col-md-6">
            <nav aria-label="Page navigation">
                <ul class="pagination" id="page_nav">
                </ul>
            </nav>
        </div>
    </div>
    <div th:replace="commons::footer"></div>
    <script>
        var click_id,curPage,total,add;
        function addStudy(){
            $.ajax({
                url:'addStudy',
                success:function (result) {
                    alert(result.extend.data);
                    toPageNum(curPage);
                }
            })
        }
        $(function () {
            toPageNum(1);
        });
        $("#save_click").click(function () {
            var data=$("#modal form").serialize();
            if (!add){data+="&id="+click_id}
            $.ajax({
                url: add?'addCollege':'modifyCollege',
                data: data,
                type: 'post',
                success: function (result) {
                    if (result.code === 100) {
                        $('#modal').modal('hide');
                        toPageNum(add?total:curPage);
                    } else {
                        alert(result.extend.error);
                    }
                }
            })
        });
        function toPageNum(page) {
            $.ajax({
                url: "getAllStudy",
                data: "page=" + page,
                type: "get",
                success: function (result) {
                    console.log(result);
                    build_tables(result.extend.pageInfo.list);
                    build_page_info(result.extend.pageInfo);
                    build_page_nav(result.extend.pageInfo);
                }
            });
        }
        //构建信息表
        function build_tables(result) {
            $("#table tbody").empty();
            $.each(result, function (index, item) {
                var id = $("<td></td>").append(item.id);
                var sem = $("<td></td>").append(item.sem.sem);
                var orderNum = $("<td></td>").append(item.orderNum);
                var totalFee = $("<td></td>").append(item.totalFee);
                var status = $("<td></td>").append(item.status);
                var submitBtn = $("<button></button>").addClass("btn btn-success btn-sm submit_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-ok")).append("提交");
                var td1= $("<td></td>").append(submitBtn);
                var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-edit")).append("修改");
                var td2= $("<td></td>").append(editBtn);
                var trashBtn = $("<button></button>").addClass("btn btn-danger btn-sm trash_btn")
                    .append($("<span></span>").addClass("glyphicon glyphicon-trash")).append("删除");
                var td3 = $("<td></td>").append(trashBtn);
                $("<tr></tr>").append(id, sem, orderNum, totalFee, status,td1,td2,td3).appendTo("#table tbody").attr("item_id",item.id);
            })
        }
        //构建分页信息
        function build_page_info(result) {
            total=result.pages;curPage=result.pageNum;
            $("#page_info").empty();
            $("#page_info").append("当前第" + result.pageNum + "页，总" + result.pages + "页，总" + result.total + "条记录。")
            total = result.pages;
        }
        //构建分页导航条，下次用vue.js，这太不好写了
        function build_page_nav(result) {
            $("#page_nav").empty();
            var firstLi = $("<li></li>").append($("<a></a>").append("首页").attr("href", "javascript:toPageNum(1);"));
            var preLi = $("<li></li>").append($("<span></span>").append("&laquo;")).click(function () {
                toPageNum(result.prePage)
            });
            var nextLi = $("<li></li>").append($("<span></span>").append("&raquo;")).click(function () {
                toPageNum(result.nextPage)
            });
            var lastLi = $("<li></li>").append($("<a></a>").append("末页").attr("href", "javascript:toPageNum(" + result.pages + ");"));

            if (!result.hasPreviousPage) {
                firstLi.addClass("disabled");
                preLi.addClass("disabled").unbind("click");
            }
            if (!result.hasNextPage) {
                nextLi.addClass("disabled").unbind("click");
                //lastLi.addClass("disabled").firstChild().removeAttr("href");
            }
            $("#page_nav").append(firstLi, preLi);
            $.each(result.navigatepageNums, function (index, item) {
                var numLi = $("<li></li>").append($("<a></a>").append(item).attr("href", "javascript:toPageNum(" + item + ");"));
                if (item === result.pageNum) {
                    numLi.addClass("active");
                }
                $("#page_nav").append(numLi);
            });
            $("#page_nav").append(nextLi, lastLi);
        }
        //提交
        $(document).on("click",".submit_btn",function(){
            click_id=$(this).parent().parent().attr("item_id");
            $.ajax({
                url: 'submitStudy?id='+click_id,
                type: 'get',
                success: function (result) {
                    console.log(result);
                    alert(result.extend.data);
                    toPageNum(curPage);
                }
            })
        });
        //编辑
        $(document).on("click",".edit_btn",function(){
            click_id=$(this).parent().parent().attr("item_id");
            top.location="modifyStudy/"+click_id;
        });
        //删除
        $(document).on("click",".trash_btn",function(){
            click_id=$(this).parent().parent().attr("item_id");
            if(confirm("确定删除这个学习计划吗？")){
                $.ajax({
                    url: 'deleteStudy?id='+click_id,
                    type: 'get',
                    success: function (result) {
                        console.log(result);
                        alert(result.extend.data);
                        toPageNum(curPage);
                    }
                })
            }
        });
        function showModal(b,p1,p2,p3,p4,p5,p6) {
            add=b;
            $("#college_name_input").val(p1);
            $("#college_manager_input").val(p2);
            $("#college_address_input").val(p3);
            $("#college_degreeName_input").val(p4);
            $("#college_score_input").val(p5);
            $("#college_studyTime_input").val(p6);
            $("#modal").modal({
                backdrop:"static"
            });
        }
    </script>
</div>
</body>
</html>